import React from 'react';
import {header} from './styles'

// return <div style={header}>Header</div>

class Header extends React.Component {
    render() {
        return <div className="navbar">
            <div className="navbar-inner">
                <div className="container-fluid">
                    <a className="btn btn-navbar" data-toggle="collapse"
                       data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                        <span className="icon-bar"></span>
                    </a>
                    <a className="brand" href="index.html"><span>JANUX</span></a>

                    <div className="nav-no-collapse header-nav">
                        <ul className="nav pull-right">
                            <li className="dropdown hidden-phone">
                                <a className="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i className="icon-bell"></i>
								<span className="badge red">
								7 </span>
                                </a>
                                <ul className="dropdown-menu notifications">
                                    <li className="dropdown-menu-title">
                                        <span>You have 11 notifications</span>
                                        <a href="#refresh"><i className="icon-repeat"></i></a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="icon blue"><i className="icon-user"></i></span>
                                            <span className="message">New user registration</span>
                                            <span className="time">1 min</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="icon green"><i className="icon-comment-alt"></i></span>
                                            <span className="message">New comment</span>
                                            <span className="time">7 min</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="icon green"><i className="icon-comment-alt"></i></span>
                                            <span className="message">New comment</span>
                                            <span className="time">8 min</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="icon green"><i className="icon-comment-alt"></i></span>
                                            <span className="message">New comment</span>
                                            <span className="time">16 min</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="icon blue"><i className="icon-user"></i></span>
                                            <span className="message">New user registration</span>
                                            <span className="time">36 min</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="icon yellow"><i className="icon-shopping-cart"></i></span>
                                            <span className="message">2 items sold</span>
                                            <span className="time">1 hour</span>
                                        </a>
                                    </li>
                                    <li className="warning">
                                        <a href="#">
                                            <span className="icon red"><i className="icon-user"></i></span>
                                            <span className="message">User deleted account</span>
                                            <span className="time">2 hour</span>
                                        </a>
                                    </li>
                                    <li className="warning">
                                        <a href="#">
                                            <span className="icon red"><i className="icon-shopping-cart"></i></span>
                                            <span className="message">New comment</span>
                                            <span className="time">6 hour</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="icon green"><i className="icon-comment-alt"></i></span>
                                            <span className="message">New comment</span>
                                            <span className="time">yesterday</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="icon blue"><i className="icon-user"></i></span>
                                            <span className="message">New user registration</span>
                                            <span className="time">yesterday</span>
                                        </a>
                                    </li>
                                    <li className="dropdown-menu-sub-footer">
                                        <a>View all notifications</a>
                                    </li>
                                </ul>
                            </li>

                            <li className="dropdown hidden-phone">
                                <a className="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i className="icon-calendar"></i>
								<span className="badge red">
								5 </span>
                                </a>
                                <ul className="dropdown-menu tasks">
                                    <li className="dropdown-menu-title">
                                        <span>You have 17 tasks in progress</span>
                                        <a href="#refresh"><i className="icon-repeat"></i></a>
                                    </li>
                                    <li>
                                        <a href="#">
										<span className="header">
											<span className="title">iOS Development</span>
											<span className="percent">80%</span>
										</span>
                                            <div
                                                className="taskProgress progressSlim red ui-progressbar ui-widget ui-widget-content ui-corner-all"
                                                role="progressbar" aria-valuemin="0" aria-valuemax="100"
                                                aria-valuenow="80">80
                                                <div className="ui-progressbar-value ui-widget-header ui-corner-left"
                                                     style={{width: '80%'}}></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
										<span className="header">
											<span className="title">Android Development</span>
											<span className="percent">47%</span>
										</span>
                                            <div
                                                className="taskProgress progressSlim green ui-progressbar ui-widget ui-widget-content ui-corner-all"
                                                role="progressbar" aria-valuemin="0" aria-valuemax="100"
                                                aria-valuenow="47">47
                                                <div className="ui-progressbar-value ui-widget-header ui-corner-left"
                                                     style={{width: '47%'}}></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
										<span className="header">
											<span className="title">ARM Development</span>
											<span className="percent">32%</span>
										</span>
                                            <div
                                                className="taskProgress progressSlim yellow ui-progressbar ui-widget ui-widget-content ui-corner-all"
                                                role="progressbar" aria-valuemin="0" aria-valuemax="100"
                                                aria-valuenow="32">32
                                                <div className="ui-progressbar-value ui-widget-header ui-corner-left"
                                                     style={{width: '32%'}}></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
										<span className="header">
											<span className="title">ARM Development</span>
											<span className="percent">63%</span>
										</span>
                                            <div
                                                className="taskProgress progressSlim greenLight ui-progressbar ui-widget ui-widget-content ui-corner-all"
                                                role="progressbar" aria-valuemin="0" aria-valuemax="100"
                                                aria-valuenow="63">63
                                                <div className="ui-progressbar-value ui-widget-header ui-corner-left"
                                                     style={{width: '63%'}}></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
										<span className="header">
											<span className="title">ARM Development</span>
											<span className="percent">80%</span>
										</span>
                                            <div
                                                className="taskProgress progressSlim orange ui-progressbar ui-widget ui-widget-content ui-corner-all"
                                                role="progressbar" aria-valuemin="0" aria-valuemax="100"
                                                aria-valuenow="80">80
                                                <div className="ui-progressbar-value ui-widget-header ui-corner-left"
                                                     style={{width: '80%'}}></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a className="dropdown-menu-sub-footer">View all tasks</a>
                                    </li>
                                </ul>
                            </li>

                            <li className="dropdown hidden-phone">
                                <a className="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i className="icon-envelope"></i>
								<span className="badge red">
								4 </span>
                                </a>
                                <ul className="dropdown-menu messages">
                                    <li className="dropdown-menu-title">
                                        <span>You have 9 messages</span>
                                        <a href="#refresh"><i className="icon-repeat"></i></a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="avatar"><img src="img/avatar.jpg" alt="Avatar"/></span>
										<span className="header">
											<span className="from">
										    	Dennis Ji
										     </span>
											<span className="time">
										    	6 min
										    </span>
										</span>
                                        <span className="message">
                                            Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                        </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="avatar"><img src="img/avatar.jpg" alt="Avatar"/></span>
										<span className="header">
											<span className="from">
										    	Dennis Ji
										     </span>
											<span className="time">
										    	56 min
										    </span>
										</span>
                                        <span className="message">
                                            Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                        </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="avatar"><img src="img/avatar.jpg" alt="Avatar"/></span>
										<span className="header">
											<span className="from">
										    	Dennis Ji
										     </span>
											<span className="time">
										    	3 hours
										    </span>
										</span>
                                        <span className="message">
                                            Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                        </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="avatar"><img src="img/avatar.jpg" alt="Avatar"/></span>
										<span className="header">
											<span className="from">
										    	Dennis Ji
										     </span>
											<span className="time">
										    	yesterday
										    </span>
										</span>
                                        <span className="message">
                                            Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                        </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span className="avatar"><img src="img/avatar.jpg" alt="Avatar"/></span>
										<span className="header">
											<span className="from">
										    	Dennis Ji
										     </span>
											<span className="time">
										    	Jul 25, 2012
										    </span>
										</span>
                                        <span className="message">
                                            Lorem ipsum dolor sit amet consectetur adipiscing elit, et al commore
                                        </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a className="dropdown-menu-sub-footer">View all messages</a>
                                    </li>
                                </ul>
                            </li>

                            <li className="dropdown">
                                <a className="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i className="halflings-icon white user"></i> Dennis Ji
                                    <span className="caret"></span>
                                </a>
                                <ul className="dropdown-menu">
                                    <li className="dropdown-menu-title">
                                        <span>Account Settings</span>
                                    </li>
                                    <li><a href="#"><i className="halflings-icon user"></i> Profile</a></li>
                                    <li><a href="login.html"><i className="halflings-icon off"></i> Logout</a></li>
                                </ul>
                            </li>

                        </ul>
                    </div>

                </div>
            </div>
        </div>
    }
}

export default Header;
